<template>
  <div class="audit-result">
    <!-- 审核中状态 -->
    <div v-if="status === 1" class="audit-status auditing">
      <div class="icon-box">
        <img class="icon" src="~@/assets/icons/auditing.png" alt="" />
      </div>
      <div class="message">您的申请正在审核中，请耐心等待...</div>
    </div>

    <!-- 审核失败状态 -->
    <div v-else-if="status === 2" class="audit-status failed">
      <div class="icon-box">
        <img class="icon" src="~@/assets/icons/failed.png" alt="" />
      </div>
      <div class="message">很抱歉，您的申请审核未通过</div>
      <div class="reason" v-if="reason">{{ reason }}</div>
      <button class="reapply-btn" @click="handleReapply">重新申请</button>
    </div>

    <!-- 无效状态提示 -->
    <div v-else class="invalid-status"> 无效的审核状态 </div>
  </div>
</template>

<script setup>
  import { defineProps, defineEmits } from 'vue';

  // 定义组件属性
  const props = defineProps({
    // 审核状态：1=审核中，2=审核失败
    status: {
      type: Number,
      required: true,
      validator: (value) => [1, 2].includes(value),
    },
    // 可选：审核失败原因
    reason: {
      type: String,
      default: '',
    },
  });

  // 定义组件事件
  const emit = defineEmits(['reapply']);

  // 重新申请处理函数
  const handleReapply = () => {
    emit('reapply');
  };
</script>

<style scoped>
  .audit-result {
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
    margin: 0 auto;
  }

  .audit-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .icon-box {
    margin-bottom: 15px;
  }

  .icon {
    height: 120px;
  }

  .message {
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }

  .reason {
    color: #666;
    background-color: #f9f9f9;
    padding: 12px 20px;
    border-radius: 4px;
    max-width: 80%;
    margin: 10px auto;
    font-size: 14px;
  }

  .reapply-btn {
    margin-top: 20px;
    padding: 8px 26px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }

  .reapply-btn:hover {
    background-color: #40a9ff;
  }

  .reapply-btn:active {
    background-color: #096dd9;
  }

  .invalid-status {
    color: #ff4d4f;
    font-size: 18px;
    padding: 40px 0;
  }
</style>
